<template>
  <div class="page-card activity-card">
    <div class="page-card-content">
      <div class="item-title">
        活动
        <div class="opt-btns">
          <span :class="[status==='1'?'active':'']" @click="()=>{status='1'}">新建任务</span>
          <el-divider direction="vertical" />
          <span :class="[status==='2'?'active':'']" @click="()=>{status='2'}">新建事件</span>
        </div>
      </div>
      <div class="activity-card-content">
        <el-button v-if="status==='0'" plain icon="el-icon-plus" @click="status='1'">添加</el-button>
        <TaskForm v-if="status==='1'" :type="type" :data="data" @success="handleSuccess" />
        <EventForm v-if="status==='2'" :type="type" :data="data" @success="handleSuccess" />

      </div>
    </div>
  </div>
</template>
<script>
import TaskForm from './taskForm.vue'
import EventForm from './eventForm.vue'

export default {
  name: 'ActivityCard',
  components: { TaskForm, EventForm },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: Number,
      default: 0
    }

  },
  data() {
    return {
      status: '0' // 0 默认  1 task  2 event
    }
  },
  methods: {
    handleSuccess() {
      console.log('handleSuccess:111')
      this.$emit('change')
    }
  }
}
</script>
<style lang="scss" scoped>
.activity-card{
  .item-title{
    position: relative;
    .opt-btns{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      span{
        cursor: pointer;
        &.active{
          color: $--color-primary;
        }
        &:hover{
          color: $--color-primary;

        }
      }
    }
  }
  .activity-card-content{
    padding-top: 10px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

  }
}
</style>
